<%--
  Created by IntelliJ IDEA.
  User: 余沣
  Date: 2021/6/22
  Time: 16:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>旅游系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <%--    1. 引入bootstrap.css--%>
    <link rel="stylesheet" href="/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <%--    引入layui样式--%>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/css/nav.css">

    <style>
        .remark{
            overflow:hidden;

            text-overflow:ellipsis;

            display:-webkit-box;

            -webkit-box-orient:vertical;

            -webkit-line-clamp:2;
        }
        .user_enter{
            text-align: center;
            color: black;
            text-shadow: 2px 2px 0px #000;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                        <span class="sr-only">切换导航</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">八一铁路12345</a>
                </div>
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <form class="navbar-form navbar-left" role="search">
                                <div class="input-group">
                                    <input value="${name}" type="text" id="search_input" class="form-control">
                                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="search_place()">search</button>
                    </span>
                                </div>
                            </form>
                        </li>
                        <li class="active"><a href="/product/index">首页</a></li>
                        <li><a href="#">${user.username}</a></li>
                        <li><a href="/user/index">登录</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#myModal">注册</a></li>

                        <li><div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" id="dropdownMenu5" data-toggle="dropdown">车票信息
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu5">
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="/railticket/index">车票购买</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="/train/index">订单查询</a>
                                </li>
                            </ul>
                        </div></li>
                        <li><div class="dropdown">
                            <button type="button" class="btn dropdown-toggle" id="dropdownMenu6" data-toggle="dropdown">商旅服务
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu6">
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="/shangpin/index">商品</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="/cart/index">商品订单</a>
                                </li>
                                <li role="presentation">
                                    <a role="menuitem" tabindex="-1" href="/product/index">旅游系统</a>
                                </li>
                                <c:if test="${user!=null}">
                                    <li><a href="/user/exit">安全退出</a></li>
                                </c:if>
                            </ul>
                        </div></li>
                        <li><img class="nav_img" src="/imgs/loading3.gif"></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>

<%--    jsp中如何获取后端request作用域中的数据--%>
<%--    使用到的是EL表达方式 - ${key}--%>

<div id="myCarousel" class="carousel slide">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
            <div class="m-swiper_container" style="width: 818px; margin-left: 30%; ">
                <img src="/imgs/033.png" alt="First slide">
            </div>
            <div class="carousel-caption">台湾</div>
        </div>
        <div class="item">
            <div class="m-swiper_container" style="width: 818px; margin-left: 30%; ">
            <img src="/imgs/034.png" alt="Second slide">
            </div>
            <div class="carousel-caption">香港</div>
        </div>
        <div class="item">
            <div class="m-swiper_container" style="width: 818px; margin-left: 30%; ">
            <img src="/imgs/032.png" alt="Third slide">
            </div>
            <div class="carousel-caption">宁夏</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<%--    首页内容begin--%>
<div class="container-fluid">
    <div class="row">
        <%--            ${productList} - 根据后台放在request作用域中的key来获取的集合对象--%>
        <%--            var = "p" 此处的p代表的就是当前正在被迭代和使用的集合中的某个对象--%>
        <c:forEach items="${productList}" var="p">

                        <div class="col-sm-6 col-md-3">
                            <div class="thumbnail">
                                <img src="/imgs/${p.imgUrl}"
                                     alt="通用的占位符缩略图">
                                <div class="caption">
                                        <%--                            EL支持OGNL语法 - 对象导航语言--%>
                                    <h3>${p.name}</h3>
                                    <p class="remark">描述:${p.remark}</p>
                                </div>
                            </div>
                        </div>

        </c:forEach>
    </div>
</div>
<%--    首页内容end--%>

<script>
    // 搜索按钮完成的功能
    function search_place(){
        //1. 获取搜索的文本框中输入的数据
        let search_input_value = document.getElementById("search_input").value;
        //2. 发送参数到后台
        //window.localtion='url?参数名1=参数值2&参数名2=参数值2&参数名3=参数值4'
        window.location='/product/index?name='+search_input_value;

    }
</script>
<%--    引入layui - js--%>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<%--    2. 先引入jquery.min.js--%>
<script type="text/javascript" src="/plugins/jquery/jquery.min.js"></script>
<%--    3. 引入bootstrap.js文件--%>
<script type="text/javascript" src="/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</body>
</html>
